import defaultSettings from '@/settings'
import { getTheme, setTheme } from '@/utils/auth'

// 做setting网站配置的模块 标题 logo 头部固定
const { showSettings, fixedHeader, sidebarLogo, theme } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  theme: getTheme() || theme // 优先从本地去主题色 取不到使用默认主题
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // console.log(key, value)
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) { // obj.hasOwnProperty('属性名') 返回值是一个布尔值检测对象中是否含有某个属性
      state[key] = value
    }
    // if判断只做主题的本地存储将主题色存储在本地
    if (key === 'theme') {
      setTheme(value)
    }
  },
  // 修改theme属性的mutation
  /* changeColor(state, val) {
    state.theme = val
  } */
  // 重置主题的mutation
  resetTheme(state) {
    state.theme = theme
  }
}

const actions = {
  // 这个action要求传递 {key:xxx, value:xxx}这样的格式配合着上面的mutation,实现了复用
  // 只要修改state中存在的属性 按着这个规则去触发这个action
  changeSetting({ commit }, data) {
    // {key:xxx, value:xxx}
    // console.log(data)
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

